<template>
	<view class="item_detail_box box_shadow" :style="!isUp ? hide : show">
		<pull-up :isUp.sync="isUp" ></pull-up>
		<scroll-view class="content" :scroll-y="isUp" :scroll-top="scrollTop" @scroll='handleScroll'> 
		<!-- <image @click="openLocation" class="openLocation_btn" src="../../static/img/open_location.png" mode=""></image> -->
		
	
			<view class="detail_head">
				
			<J-skeleton
			  :loading="skeletonLoading"
			  :avatarSize="'82rpx'"
			  :row="2"
			  showTitle
			  animates
			  avatarShape='square'
			  >
				<realtime-monitor-item  class="mapDetail"
				:realtimeMonitorData="realtimeMonitorDetail"
				:showStatus='true'
				:isBad='isBad'></realtime-monitor-item>
			</J-skeleton>
			</view>
			<view class="removeAlarm_btn_box flex_between_row">
				<view class="btn_removeAlarm alarm_removed" v-if="realtimeMonitorDetail.ravelflag === 1">报警已解除</view>
				<view class="btn_removeAlarm" v-else @click="removeAlarm">解除报警</view>
				<view class="btn_removeAlarm alarm_removed"  @click="openLocation">到这去</view>
			</view>
			<!-- <scroll-view scroll-y="true" v-show="isUp"> -->
			<indicators-item :equipmentCode="realtimeMonitorDetail.equipmentCode"></indicators-item>
			<view class="comm_box">
				<view class="con_box">
					
					<view class="device_info_row">
						<text>GPS位置</text>
						<text>{{ realtimeMonitorDetail.GPSposition ? realtimeMonitorDetail.GPSposition : '暂无'}}</text>
					</view>
					<view class="device_info_row">
						<text>数据时间</text>
						<text>{{realtimeMonitorDetail.monitorIndex.datatime}}</text>
					</view>
					<view class="device_info_row">
						<text>关联对象</text>
						<text>{{ realtimeMonitorDetail.relateObject ? realtimeMonitorDetail.relateObject : '暂无' }}</text>
					</view>
					<!-- <view class="device_info_row">
						<text>所属对象</text>
						<text>{{ realtimeMonitorDetail.alarmPoint ?realtimeMonitorDetail.alarmPoint: '暂无' }}</text>
					</view>
					<view class="device_info_row">
						<text>所在节点</text>
						<text>{{ realtimeMonitorDetail.equipNode ?realtimeMonitorDetail.equipNode: '暂无'}}</text>
					</view> -->
				</view>
			</view>
			<view class="comm_box flex_column">
			<view class="tit_box flex_between_row"><view>周边照片</view></view>
			<view class="con_box" style="text-align: center;">
				<image class="noImage" v-if="!realtimeMonitorDetail.filePath.length" :src="noImageUrl" mode="widthFix"></image>
				<image v-else v-for="(item, i) in realtimeMonitorDetail.filePath" :key="i" :src="item"></image>
			</view>
		</view>
		</scroll-view>
	</view>
</template>

<script>
let vm;
export default {
	data() {
		return {
			noImageUrl:'https://6761-gas-monitor-01-16c3ed-1303022585.tcb.qcloud.la/gasAiot/noImage.png',
			realtimeMonitorDetail: null,
			equipId: '',
			isUp: false, //默认收起状态
			show:"height: 100vh;top:16rpx",
			hide:"height: 450rpx;top:calc(100vh - 450rpx)",
			showIndicators: false,
			scrollTop:0,
			isBad:true,
			skeletonLoading:true
		};
	},
	props:['lonAndlat'],
	mounted() {
		vm = this;
	},
	watch:{
		isUp(newVal){
			if(!newVal){
				vm.scrollTop = Math.random();  
			}
		}
	},
	methods: {
		init() {
			let vm = this
			vm.getEquipDetailInfoFn();
		},
		handleScroll(e){
			if(e.detail.scrollTop < -150){
				vm.isUp = false
			}
		},
		removeAlarm(){
			if(vm.realtimeMonitorDetail.ravelflag === 1){
				return false
			}
			let id = vm.realtimeMonitorDetail.equipmentCode
			uni.getStorage({
				key:'userinfo',
				success(){
					uni.navigateTo({
						url:`/pages/views/removeAlarm/removeAlarm?equipCode=${id}`
					})
				},
				fail() {
					uni.showModal({
						title:'提示信息',
						content:'请先登录',
						success(res) {
							if(res.confirm){
								uni.navigateTo({
									url:'/pages/views/login/login'
								})
							}
						}
					})
				}
			})
			
		},
		openLocation() {
			uni.openLocation({
				latitude: this.realtimeMonitorDetail.latitude,
				longitude: this.realtimeMonitorDetail.longtitude,
				name: this.realtimeMonitorDetail.equipmentCode,
				address: this.realtimeMonitorDetail.installPos
			});
		},
		getEquipDetailInfoFn() {
			let vm = this
			uni.getStorage({
				key:'equipId',
				success(res){
					vm.$api
						.getEquipDetailInfo({
							equipId: res.data
						})
						.then(res => {
							// vm.realtimeMonitorDetail = Object.assign({},vm.realtimeMonitorDetail,res.data);
							vm.realtimeMonitorDetail = res.data;
							console.log('vm.realtimeMonitorDetail',vm.realtimeMonitorDetail)
							vm.skeletonLoading = false
							if(!vm.realtimeMonitorDetail.equipStatus) {
								vm.isBad = false
							}else if(vm.realtimeMonitorDetail.equipStatus && vm.realtimeMonitorDetail.equipStatus.indexOf('异常') > 0){
								vm.isBad = true
							}else{
								vm.isBad = false
							}
							//console.log('vm.realtimeMonitorDetail',vm.realtimeMonitorDetail)
							console.log('vm.isBad',vm.isBad)
						});
				}
			})
			
		}
	}
};
</script>

<style lang="scss" scoped>
// .item_detail_box {
// 	position: absolute;
// 	width: 100%;
// 	border-top-left-radius: 10rpx;
// 	border-top-right-radius: 10rpx;
// 	padding: 0 20rpx;
// 	background: #ffffff;
// 	transition: all 0.5s;
// 	.detail_head {
// 		height: 260rpx;
// 		padding-top: 66rpx;
// 		padding-bottom: 20rpx;
// 		font-size: 28rpx;
// 		color: $uni-text-color-grey;
// 		display: flex;
// 		flex-direction: column;
// 		justify-content: space-around;
// 		.alarmDesc {
// 			font-size: 28rpx;
// 			color: #333;
// 			font-weight: 600;
// 		}
// 		.monitorValue {
// 			color: $uni-color-warning;
// 			font-size: 28rpx;
// 			text {
// 				font-size: 28rpx;
// 				border-radius: 4rpx;
// 				margin-left: 20rpx;
// 				padding: 0 8rpx;
// 				border: 2rpx solid $uni-color-warning;
// 			}
// 		}
// 	}
// 	.info_box {
// 		display: flex;
// 		align-items: center;
// 		height: 50rpx;
// 		margin-bottom: 20rpx;
// 		.label {
// 			width: 200rpx;
// 			color: #666;
// 		}
// 		.value {
// 			color: #666;
// 			flex: 1;
// 			flex-shrink: 0;
// 			display: flex;
// 			flex-wrap: wrap;
// 			align-items: center;
// 		}
// 	}
// }
.device_info_row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 70rpx;
	text {
		font-size: 28rpx !important;
		&:first-child {
			display: block;
			width: 180rpx;
			color: $uni-text-color-black;
		}
		&:last-child {
			color: $uni-text-color-disable;
			overflow: hidden;
			text-overflow: hidden;
			text-overflow: ellipsis;
			text-align: right;
		}
	}
}
.history_alarm_box {
	border-bottom: 2rpx solid $uni-bg-color-grey;
	margin-bottom: 20rpx;
	padding-bottom: 20rpx;
	&:last-child {
		margin-bottom: 0;
		border-bottom: none;
		padding-bottom: 0;
	}
}
// scroll-view {
// 	height: calc(100% - 260rpx);
// 	flex-shrink: 0;
// 	background: #f5f6f9;
// 	padding-top: 10rpx;
// 	.comm_box {
// 		background: #fff;
// 		margin-bottom: 10rpx;
// 		.tit_box {
// 			width: 100%;
// 			height: 90rpx;
// 			line-height: 90rpx;
// 			border-bottom: 2rpx solid #dde0e4;
// 			font-size: 28rpx;
// 			font-weight: 600;
// 		}
// 		.con_box {
// 			padding: 20rpx 0;
// 			width: 100%;
// 			.chart_info {
// 				padding: 0 20rpx;
// 				background: #e5eefa;
// 				color: $uni-color-primary;
// 				height: 44rpx;
// 				line-height: 44rpx;
// 			}
// 			.chartBox {
// 				height: 600rpx;
// 			}
// 			image {
// 				width: 150rpx;
// 				height: 150rpx;
// 				margin-right: 25rpx;
// 				margin-bottom: 25rpx;
// 			}
// 		}
// 	}
// }
.noImage{
	width: 85%;
}
</style>
